<template>
	<view class="containear theme-page-bg">
		<view class="padding-20">
			<SearchBox class="m-t-30" />
		</view>
		<!-- <ScrollView :contentHeight="contentHeight">
			<template #content>
				
			</template>
		</ScrollView> -->
		<view class="flex m-t-30">
			<MenuScroll :contentHeight="contentHeight" :menuList="menuList" @getItemMenu='getItemMenu'/>
			<scroll-view scroll-y="true" class="right-wrapper flex-1 bg-w" :style="{height: contentHeight + 'px'}">
				<TabScroll class="m-l-30" :tabList="tabList" @getItem="getItem" />
				<block v-for="(item, index) in serviceList" :key="index" v-if='!noData'>
					<ServiceBox :serviceObj="item" />
				</block>
				<view class="noData" v-else>
					无数据
				</view>
			</scroll-view>
		</view>
		<bottom type="accompany" :tabIndex="1"></bottom>
	</view>
</template>

<script lang="ts">
	import bottom from '@/components/footer/footer.vue';
	import SearchBox from '@/components/house/tabbar/index/searchBox/search-box.vue';
	import MenuScroll from './components/menuScroll/menuScroll.vue';
	import TabScroll from './components/tabScroll/tabScroll.vue';
	import ServiceBox from './components/serviceBox/serviceBox.vue';
	import ScrollView from '@/components/accompany/scrollView/scrollView.vue'
	import requestHttp from '@/providers/essential/httpService.js'
	import api from '@/providers/API/api.js'
	import { onLoad } from '@dcloudio/uni-app';
	import { ref,defineComponent,getCurrentInstance,onMounted,reactive,toRefs,watch} from 'vue';
	import type { Ref } from 'vue'
	export default defineComponent({
		components: {
			TabScroll,
			MenuScroll,
			bottom,
			SearchBox,
			ServiceBox,
			ScrollView,
		},
		setup() {
			const {proxy} = getCurrentInstance() as any
			let tabName = ''
			let dataList = reactive({
				menuIndex:0,
				tabIndex:0,
				idNameMap:[],
				noData:false,
				contentHeight:483,
				parentList:[],
				sonList:[],
				sonList2:[],
				menuList : [
					// { name: '护士上门' },
					// { name: '居家照护' },
					// { name: '住院陪护' }
				],
				
				tabList : [
					// { name: '打针采血' },
					// { name: '上门换药' },
					// { name: '上门拆线' },
				],
				serviceList : [
					// {
					// 	title: "打针",
					// 	list: [
					// 		{
					// 			categoryId: 28,
					// 			categoryName: null,
					// 			city: "110100",
					// 			cityName: null,
					// 			content: "服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试",
					// 			createTime: 1692081644000,
					// 			id: 1,
					// 			merchant: "1",
					// 			originPrice: 362,
					// 			picUrls: "http://49.234.34.70:8083/admin-api/infra/file/5/get/20230815144028208NZyvKW.jpeg",
					// 			province: "110000",
					// 			provinceName: null,
					// 			salesPrice: 269,
					// 			salesVolumn: 1,
					// 			title: "服务测试",
					// 		},
					// 		{
					// 			categoryId: 28,
					// 			categoryName: null,
					// 			city: "110100",
					// 			cityName: null,
					// 			content: "服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试",
					// 			createTime: 1692081644000,
					// 			id: 1,
					// 			merchant: "1",
					// 			originPrice: 362,
					// 			picUrls: "http://49.234.34.70:8083/admin-api/infra/file/5/get/20230815144028208NZyvKW.jpeg",
					// 			province: "110000",
					// 			provinceName: null,
					// 			salesPrice: 269,
					// 			salesVolumn: 1,
					// 			title: "服务测试",
					// 		},
					// 		{
					// 			categoryId: 28,
					// 			categoryName: null,
					// 			city: "110100",
					// 			cityName: null,
					// 			content: "服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试服务测试",
					// 			createTime: 1692081644000,
					// 			id: 1,
					// 			merchant: "1",
					// 			originPrice: 362,
					// 			picUrls: "http://49.234.34.70:8083/admin-api/infra/file/5/get/20230815144028208NZyvKW.jpeg",
					// 			province: "110000",
					// 			provinceName: null,
					// 			salesPrice: 269,
					// 			salesVolumn: 1,
					// 			title: "服务测试",
					// 		}
					// 	]
					// }
					
				]				
			})
			function getItemMenu(value){
				dataList.menuIndex = value
				dataList.tabList =  []
				 dataList.sonList.forEach(item=>{
					if(item.parentId === dataList.parentList[value].id){
							dataList.tabList.push(item.name)
						}
					}
				)
				let arr2 = dataList.sonList.filter(function (item) {
					if(item.parentId === dataList.parentList[value].id){
						return item;
						} 
				    });
					
				dataList.sonList2 = arr2
				singleServiceList(dataList.sonList2[value].parentId,dataList.sonList2[value].name)
			}
			function getItem(value){
				dataList.tabIndex = value	
				if(dataList.sonList2[value].parentId === dataList.parentList[dataList.menuIndex].id){
					singleServiceList(dataList.sonList2[value].parentId,dataList.sonList2[value].name)
				}else{
					dataList.noData = true
				}
				
				
			}
			function getcategoryList(){
				let url = api.getcategoryList
				let param = {
				}
				console.log(api.getcategoryList, 'getServiceManage')
				requestHttp.getData(url, param).then((res) => {
					if (res.code == 0) {
						dataList.categoryList = res.data
						dataList.menuList = []
						dataList.tabList = []
						res.data.forEach((item)=>{
							if(item.parentId === 0){
								dataList.menuList.push(item.name);
							}else{
								
							}
						})
						dataList.idNameMap =  res.data
						dataList.parentList = []
						dataList.sonList = []
						  dataList.categoryList.forEach((item)=>{
							
							if(item.parentId === 0){
								dataList.parentList.push(item);
							}else{
								dataList.sonList.push(item)
								
							}
						 })
						 dataList.tabList = []
						  dataList.sonList.forEach(item=>{
						 	if(item.parentId === dataList.parentList[0].id){
						 			dataList.tabList.push(item.name)
						 		}
						 	}
						 )
						 
						 let arr2 = dataList.sonList.filter(function (item) {
						 	if(item.parentId === dataList.parentList[0].id){
						 		return item;
						 		} 
						     });
						 	
						 dataList.sonList2 = arr2
						 let idName =  dataList.sonList.find(item=>item.parentId === dataList.parentList[0].id)
						 singleServiceList(dataList.parentList[0].id,idName.name)
					} else if (res.msg) {
						uni.showToast({
							title: res.msg, //显示的文字 
							icon:'none'
						})
					
					}
					
				})
			}
			
			let i = 0
			function getServiceAll(){
				if(i >= dataList.categoryList.length ){
					return
				}
				let url = api.getServiceList
				let param = {
					pageNo:1,
					pageSize:10,
					categoryId:dataList.categoryList[i].id
					
				}
				requestHttp.getData(url, param).then((res) => {
					console.log(res, 'res')
					if (res.code == 0) {
						if(res.data.list.length !== 0){
							let serviceListSuffer = {
								title:dataList.categoryList[i].name,
								list:res.data.list
							}
							dataList.serviceList.push(serviceListSuffer)
						}
						i++;
						getServiceAll()	
					} else if (res.msg) {
						uni.showToast({
							title: res.msg, //显示的文字 
							icon:'none'
						})
							
					}			
				})					
			}
			
			function singleServiceList(id,name){
				let url = api.getServiceList
				let param = {
					pageNo:1,
					pageSize:10,
					categoryId:id
				}
				console.log(id, 'id')
				requestHttp.getData(url, param).then((res) => {
					console.log(res, 'res')
					if (res.code == 0) {
						dataList.serviceList = [{
							title:name,
							list:res.data.list,
						}]		
						if(res.data.list.length == 0){
							dataList.noData = true
							
						}else{
							dataList.noData = false
						}
					
					} else if (res.msg) {
						uni.showToast({
							title: res.msg, //显示的文字 
							icon:'none'
						})
							
					}			
				})	
			}
			onMounted(() => {
				console.log('onLoad')
				let sysInfo = uni.getStorageSync('sysInfo')
				dataList.contentHeight = sysInfo.screenHeight - sysInfo.statusBarHeight - 94 - 140/sysInfo.devicePixelRatio
				console.log('contentHeight',dataList.contentHeight)
				getcategoryList()
			})
			
			return {
				getItemMenu,
				getItem,
				getServiceAll,
				getcategoryList,
				...toRefs(dataList),
			}
		}
	})
</script>

<style lang="scss">
	// ::-webkit-scrollbar {
	//     width: 0;
	//     height: 0;
	//     background-color: transparent;
	// }
	.containear {
		overflow: hidden;
	}
	.padding-12 {
		padding: 0 12rpx;
	}
	.right-wrapper {
		padding: 30rpx 0 30rpx 0rpx;
		border-top-left-radius: 30rpx;
	}
	.noData{
		display: flex;
		height: 90%;
		align-items: center;
		justify-content: center;
		
	}
</style>
